<template>
  <KView class="circle-log-view">
    <KView class="circle-log-view-content">
      <circle-log-item v-for="log in logs" :key="log.id" :log="log" @to-praise="toPraiseLog" @item-click="itemClick"></circle-log-item>
    </KView>

    <template v-if="loading||pagination.hasNextPage()">
      <KView class="circle-log-view-line"></KView>
      <KView class="circle-log-view-more">
        <KView class="circle-log-view-more-btn" @click="lookMore">展开更多回复</KView>
        <sys-loading v-if="loading" :size="50"></sys-loading>
      </KView>
    </template>
  </KView>
</template>

<script>
  import SysLoading from 'common/sysLoading';
  import CircleLogItem from 'views/sysCircle/components/circleLogItem';

  import SysCircleApi from 'services/sysCircleApi';
  import SystemUtil from 'utils/systemUtil';

  export default {
    props: {
      logs: {
        type: Array,
        required: true
      },
      pagination: {
        type: Object,
        required: true
      },
      nextDataFun: {
        type: Function,
        required: true
      }
    },

    data() {
      return {
        loading: false
      };
    },

    methods: {
      toPraiseLog(log) {
        if (log.isPraise) {
          return;
        }

        SystemUtil.showLoading('');
        SysCircleApi.praiseCircleZoneLog(log).then(logData => {
          log.resetCircleLogStatusData(logData);
          let pages = getCurrentPages();
          for (let i = 0; i < pages.length; i++) {
            const page = pages[i];
            let pageWin = page.window;
            if (pageWin.resetCircleZoneLogById) {
              pageWin.resetCircleZoneLogById(logData);
            }
          }

          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      itemClick(log) {
        this.$emit('item-click', log);
      },

      lookMore() {
        if (this.loading) {
          return;
        }

        let pagination = this.pagination;
        if (!pagination.hasNextPage()) {
          return;
        }

        pagination.nextPage();
        this.loading = true;
        this.nextDataFun().then(() => {
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      }
    },

    components: {
      CircleLogItem,
      SysLoading
    }
  };

</script>

<style lang="scss">
  @import '~style/sysCircleLogView';

</style>
